<template>
	<!-- 新增/编辑 -->
	<u-popup :show="show" mode="bottom" closeable @close="close">
		<view class="jz-editJz">
			<view class="title">{{ isEdit ? "添加记账" : "编辑记账" }}</view>
			<view class="content">
				<u--form :model="formData" ref="uForm" :rules="rules" labelWidth="auto">
					<u-form-item label="姓名" prop="registrant" required>
						<u-input v-model="formData.registrant" maxlength="16" />
					</u-form-item>
					<u-form-item label="花费" prop="cost" required>
						<u-input v-model="formData.cost" />
					</u-form-item>
					<u-form-item label="收入" prop="income" required>
						<u-input v-model="formData.income" />
					</u-form-item>
					<u-form-item label="备注" prop="remark">
						<u-input v-model="formData.remark" maxlength="16" />
					</u-form-item>
				</u--form>
			</view>
			<view class="footerBtn">
				<u-button @click="submit" type="primary">提交</u-button>
			</view>
		</view>
	</u-popup>
</template>

<script lang="ts" setup>
import { useUserStore } from "@/store/modules/user";
import { debounce } from "lodash-es";

let show = ref(false);
let isEdit = ref(false);

let formData = ref<ListItem>({
	// 花费
	cost: 0,
	// 收入
	income: 0,
	// 创建时间
	time: new Date(),
	// 备注
	remark: "",
	// 登记人
	registrant: ""
});
const rules = {
	registrant: [
		{
			required: true,
			message: "请输入姓名",
			// 可以单个或者同时写两个触发验证方式
			trigger: "blur,change"
		}
	],
	cost: [
		{
			required: true,
			type: "number",
			message: "请输入金额",
			// 可以单个或者同时写两个触发验证方式
			trigger: "blur,change"
		}
	],
	income: [
		{
			required: true,
			type: "number",
			message: "请输入金额",
			// 可以单个或者同时写两个触发验证方式
			trigger: "blur,change"
		}
	]
};

onReady(() => {
	uForm.value.setRules(rules);
});

const showPop = (item?: ListItem) => {
	formData.value = {
		// 花费
		cost: 0,
		// 收入
		income: 0,
		// 创建时间
		time: new Date(),
		// 备注
		remark: "",
		// 登记人
		registrant: ""
	};
	show.value = true;
	formData.value.registrant = useUserStore().userInfo.nickname;
	if (item) {
		isEdit.value = true;
		formData.value.cost = item.cost;
		formData.value.income = item.income;
	}
};
defineExpose({
	showPop
});
const uForm = ref();
const emit = defineEmits<{
	(e: "confirm", formData: ListItem): void;
}>();
// 提交
const submit = debounce(() => {
	uForm.value
		.validate()
		.then(() => {
			formData.value.cost = Number(formData.value.cost) as any;
			formData.value.income = Number(formData.value.income) as any;
			if (isEdit.value) {
				uni.showToast({
					icon: "none",
					title: "修改成功"
				});
				emit("confirm", formData.value);
				show.value = false;
			} else {
				uni.showToast({
					icon: "none",
					title: "新增成功"
				});
				formData.value.time = new Date();
				emit("confirm", formData.value);
				show.value = false;
			}
		})
		.catch(() => {
			console.log("验证失败");
		});
}, 200);
// 窗口关闭
const close = () => {
	show.value = false;
};
</script>

<style scoped lang="scss">
.jz-editJz {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	padding-bottom: 120rpx;
	position: relative;
	min-height: 30vh;

	.title {
		text-align: center;
		line-height: 100rpx;
		font-size: 36rpx;
		font-weight: bold;
	}
	.content {
		padding: 30rpx;

		overflow: auto;
	}
	.footerBtn {
		position: absolute;
		bottom: 20rpx;
		display: flex;
		width: 100%;
		box-sizing: border-box;
		padding: 0 30rpx;
	}
}
</style>
